<template>
  <div class="select-radio-group-box" :style="selectStyle">

    <el-radio-group v-model="value" size="small" @input="handlerSelectData">
      <template v-for="btn in selectConfig.buttonList">
        <el-radio-button :label="btn.label" >{{ btn.name }}</el-radio-button>
      </template>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'SelectRadioGroup',
  props: {
    // 筛选样式
    selectStyle: {
      type: Object,
      default: () => ({})
    },
    // 筛选配置
    selectConfig: {
      type: Object,
      default: () => ({})
    },
    // 筛选数据
    selectData: {
      type: Object,
      default: () => ({})
    },
    // 是否重置
    isReset: {
      type: Boolean,
      default: false
    },
    dynamicSelectData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      value: ''
    }
  },
  watch: {
    isReset() {
      this.handlerDefault('init')
    },
    dynamicSelectData: {
      handler(val) {
        if (val && Object.keys(val).length) {
          const { prop } = this.selectData
          for (const key in val) {
            if (Object.hasOwnProperty.call(val, key) && key === prop) {
              this.value = val[key]
              // this.handlerSelectData(this.value, 'init')
            }
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.handlerDefault('init')
  },
  methods: {
    /**
     * 处理默认值
     */
    handlerDefault() {
      const { defaultConfig } = this.selectData
      this.value = null
      if (defaultConfig) {
        this.value = defaultConfig.value
      }else {
        const { buttonList } = this.selectConfig
        this.value = buttonList && buttonList.length > 0 ? buttonList[0].label : ''
      }
      if (this.value) {
        // this.handlerSelectData(this.value, 'init')
      }
    },
    /**
     * 处理筛选
     * @param {*} val 数据
     * @param {*} type 类型
     */
    handlerSelectData(val, type) {
      const { prop } = this.selectData
      const obj = {}
      obj[prop] = this.value
      this.$emit('handlerSelectData', obj, type)
    },
    /**
     * 点击图标
     * @param {*} config 图标配置
     */
    clickIcon(config = {}) {
      if (config.isClick) {
        this.handlerSelectData(this.value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.select-radio-group-box {
  width: 100px;

  .el-radio-group {
    width: 100%;

  }
}
</style>

<style>
.select-radio-group-box .el-radio-button__inner{
  padding: 9px 10px;
}
</style>
